import { Icon } from "@iconify/react";
import { Link } from "react-router-dom";
import styled from "styled-components";

const Styled = styled.div`
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 5rem;
  a {
    font-size: 3.5rem;
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
    padding-left: 1.75rem;
    padding-right: 1.75rem;
    border-radius: 3rem;
    border-color: rgba(96, 165, 250, 1);
    border-width: 1px;
    border-style: solid;
    margin-right: 0.75rem;
    color: rgba(73, 177, 245, 1);
  }
  div {
    svg {
      &:not(:last-child) {
        margin-right: 10px;
      }
    }
  }
`;

const Forward = ({ tagList = [] }) => {
  return (
    <Styled>
      <div className="tags">
        {tagList.map((item, index) => {
          return <Link key={index}>{item}</Link>;
        })}
      </div>
      <div style={{ fontSize: "25px" }}>
        <Icon color="green" icon="ic:baseline-wechat" />
        <Icon color="orange" icon="fa6-brands:weibo" />
        <Icon color="red" icon="mingcute:qq-fill" />
        <Icon color="skyblue" icon="icon-park-outline:telegram" />
      </div>
    </Styled>
  );
};

export default Forward;
